/*
 * @Author: yangzonglong
 * @Date: 2021-05-16 18:13:08
 * @version: v1.0.0
 * @Descripttion: EndEvent
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-17 14:46:45
 * @Auditor: 
 */
import React, { useContext, useState, useCallback, useEffect } from 'react';
import { Form, Input } from 'antd';
import { Tabs } from '@library';
import context from '../context';
import { EndEventSelfProps } from './../../../interface';
import style from './../style.module.scss';

const tabsData = [
  { label: window.$app.t('baseSet'), id: 'base' } 
]

export default () => {
  const { self, modeler} = useContext(context);
  const [name, setName] = useState('');

  const _self = self as EndEventSelfProps;

  useEffect(() => {
    setName(_self.businessObject?.name || '')
  }, [_self])

  const onChange = useCallback((e) => {
    setName(e.target.value);
    modeler.get('modeling').updateLabel(_self, e.target.value)
  }, [modeler, _self]);

  return (
    <div className={style.scroll}>
      <Tabs mode='tabs' tabs={tabsData} curTabId='base' onChange={() => {}}/>
      <main>
        <Form layout='vertical'>
          <Form.Item label={window.$app.t('taskName')}>
            <Input value={name} onChange={onChange}/>
          </Form.Item>
        </Form>
      </main>
    </div>
  )
}